import React from "react";
import {WhiteSpace, WingBlank} from 'antd-mobile';
import styles from "./Story.css"
import {Link} from "react-router-dom";

export default class Story extends React.Component {
    render() {
        return (
            <div>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WhiteSpace/>
                <WingBlank>
                    <div style={{textAlign: "center"}}>
                        <Link to="/story/select">
                            <img className={styles.liImg} onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 3@2x.png")}
                                 onTouchStart={this.touchStart.bind(this, "/img/tj/资源 4@2x.png")}
                                 src='/img/tj/资源 3@2x.png'/>
                        </Link></div>
                    <div style={{textAlign: "center"}}>
                        <Link to="/story/selectsmall"><img className={styles.liImg}
                                              onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 5@2x.png")}
                                              onTouchStart={this.touchStart.bind(this, "/img/tj/资源 6@2x.png")}
                                              src='/img/tj/资源 5@2x.png'/>
                        </Link></div>
                    <div style={{textAlign: "center"}}>
                        <Link to="/story/my"><img className={styles.liImg}
                                              onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 7@2x.png")}
                                              onTouchStart={this.touchStart.bind(this, "/img/tj/资源 8@2x.png")}
                                              src='/img/tj/资源 7@2x.png'/>
                        </Link></div>
                </WingBlank>
            </div>
        )
    }

    touchStart = (src, e) => {
        e.target.src = src
    }
    touchEnd = (src, e) => {
        e.target.src = src
    }
}